<template>
	<view class="padding-v20">
		<view class="margin-b30">
			<fui-card title="设备信息">
				<view class="padding-20">
					<view class="info-item">设备编号：{{detail.device.device_id}}</view>
					<view class="info-item" v-if="detail.device.device_sn">自定义编码：{{detail.device.device_sn}}</view>
					<view class="info-item">端口总数：{{detail.device.port_count}}</view>
					<view class="info-item">上线时间：{{storeInfo.tenBitTimestamp(detail.device.connected_at)}}</view>
					<view class="info-item">心跳时间：{{storeInfo.tenBitTimestamp(detail.device.heartbeat_at)}}</view>
					<view class="cc-rows cc-flex-vcenter cc-height-50">
						<view class="cc-color-888">设备状态：</view>
						<view :class="detail.device.online?'cc-color-success':'cc-color-danger'">
							<text class="iconfont status-light">&#xe60f;</text>
							<text>{{detail.device.online ? '在线' : '离线'}}</text> 
						</view>
					</view>
					
				</view>
			</fui-card>
		</view>
		<view class="margin-b20">
			<fui-card title="服务信息">
				<view class="padding-20">
					<view class="info-item">服务节点：{{detail.node.name}}</view>
					<view class="info-item">节点IP：{{detail.node.node_ip}}</view>
					<view class="info-item">服务端口：{{detail.node.tcp_port}}</view>
					<view class="info-item">所属应用：{{detail.app.name}}</view>
					<view class="info-item">appId：{{detail.app.appId}}</view>
				</view>
			</fui-card>	
		</view>

		
		<view class="col-80">
			<!-- <fui-button btnSize="small" radius="6rpx" @click="checkDevice"></fui-button> -->
			<fui-button @click="checkDevice" background="linear-gradient(to bottom right, #4cccc5 100%, #02DBC0 100%)" :margin="['75rpx','75rpx']"
			border-width="0" text="设备检测" radius="50rpx"/>
		</view>
		<view class="">
			<fui-bottom-popup :show="showCheckModal" @close="closeCheckModal">
				<view class="padding-20" style="height: 80vh;">
					<view v-if="checkInfo.node_type===1">
						<view v-for="(item,index) in checkInfo.result">
							<view>{{index+1}}号端口</view>
							<view>当前订单：{{parseInt(item.orderId)?item.orderId:'暂无订单'}}</view>
							<view>连接状态：{{item.insert?'已连接':'未插枪'}}</view>
							<view>急停按钮：{{item.fault==='0200'?'被按下':'正常'}}</view>
							<view>当前功率：{{item.power}}瓦</view>
						</view>
					</view>
					<view v-else-if="checkInfo.node_type===2">
						<view v-for="(item,index) in checkInfo.result">
							<view>计费模式：{{item.feeMode}}瓦</view>
							<view>端口最大功率：{{item.portMaxPower}}瓦</view>
						</view>
					</view>
				</view>
			</fui-bottom-popup>
		</view>
	</view>
</template>

<script>
import { ref } from 'vue'
	import { useInfoStore } from '@/stores/info'
	export default {
		setup(){
			const detail = ref({
					device:{},
					node:{},
					app:{},
				})
			const storeInfo = useInfoStore()
			const showCheckModal=ref(false)
			const checkInfo=ref({
				node_type:0,
				result:[]
			})
			return {
				detail,storeInfo,
				showCheckModal,checkInfo
			}
		},

		onLoad({id}) {
			
			this.loadData(id)
		},
		methods: {
			loadData(id){
				uni.publicJs.post('/app/index?cmd=loadDeviceDetail',{id},
					res=>{
						console.log(res)
						this.detail=res.data
					}
				)
			},
			checkDevice(){
				uni.publicJs.post('/app/index?cmd=checkDevice',{id:this.detail.device.id},
					res=>{
						console.log(res)
						this.checkInfo=res.data
						this.showCheckModal=true
					}
				)
			},
			closeCheckModal(){
				this.showCheckModal=false
			}
		}
	}
</script>

<style>
.info-item{line-height: 60rpx; color: #888;}
.status-line{width:50rpx;height: 4rpx; border-radius: 2rpx;}
</style>
